import React, {Component} from 'react';
import {connect} from 'dva';
import {
  Input,
  Button,
  Form,
  Modal,
  message,
  Badge,
} from 'antd';


import {NavLink} from 'react-router-dom';
import * as api from "../../../services/api";
import './less/contract.less';
import PTable from "../../../components/Pro/PTable";
import PSelect from "../../../components/Pro/PSelect";
import ContractDrawer from "./ContractDrawer";
import RenewContractDrawer from "./RenewContractDrawer";
import DrawRenew from './DrawRenew';

const confirm = Modal.confirm;

@connect(state => ({profile: state.profile}))
@Form.create()

export default class ContractList extends Component {
  constructor(props, context) {
    super(props, context);
    this.state = {
      open: false,//编辑查看
      editable: false,//抽屉的输入框是否可编辑
      renewOpen: false,//续签合同
      number: 0,
      forceUpdate: false,
      typesd: '',//合同类型
      pageParm: {
        contractType: "",
        contractName: "",
        pageSize: "10",
        pageNumber: "1"
      },
      contractType: "",
      contractName: "",
      fileListUrl: '',//文件地址
      visible: false,//续签合同 抽屉 是否可见
    };
  }

  //终止合同
  interrupt = (record) => {
    console.log(record);
    const that = this;
    confirm({
      title: '是否确定终止合同？',
      okText: '确认',
      cancelText: '取消',
      onOk() {
        console.log("ok");
        api.enterpriseComContractTerminationComContract({comContractId: record.comContractId}).then((data) => {
          console.log("zhongshihetong ", data);
          that.setState({
            forceUpdate: true,
          }, () => {
            that.setState({
              forceUpdate: false,
            });
          });
        }, (err) => {
          message.error(err);
        });
      },
      onCancel() {
        console.log('Cancel');
      },
    });
  }
  //根据id删除合同
  showDeleteConfirm = (record) => {
    console.log(record);
    const that = this;
    confirm({
      title: '是否删除所选合同，删除后无法找回。是否确认删除？',
      okText: '确认',
      cancelText: '取消',
      onOk() {
        console.log("ok");

        api.enterpriseComContractDeleteComContract({comContractId: record.comContractId}).then((data) => {
          console.log(data);
          if (data.retType === 0) {
            message.success(data.msg);
          }
          that.setState({
            forceUpdate: true,
          }, () => {
            that.setState({
              forceUpdate: false,
            });
          });
        }, (err) => {
          message.error(err);
        });
      },
      onCancel() {
        console.log('Cancel');
      },
    });
  };

  //输入框所输入的值
  onChangeName = (e) => {
    // console.log('值',e.target.value.trim());
    this.setState({
      contractName: e.target.value.trim(),
    });
  };

  //table 数据变化
  dateTableChange = (data) => {
    this.setState({number: data.total});
  };

  //表格变化
  changeTable = () => {
    this.setState({
      forceUpdate: true,
      open: false
    }, () => {
      this.setState({
        forceUpdate: false
      });
    });
  };

  //搜索
  handleContractSubmit = () => {
    const pageParm = {...this.state.pageParm};
    const {contractType, contractName} = this.state;//合同类型//合同名称
    pageParm.contractType = contractType;
    pageParm.contractName = contractName;
    this.setState({
      pageParm,
      forceUpdate: true,
    }, () => {
      this.setState({
        forceUpdate: false,
      });
    });
  };
  //抽屉视图处理
  //查看
  changeDrawer2 = (record) => {
    this.setState({open: true});
    this.setState({editable: true});
    this.setState({comContractId: record.comContractId, typesd: record.contractType, fileListUrl: record.contractUrl});
  };
  //编辑
  changeDrawer3 = (record) => {
    this.setState({open: true});
    this.setState({editable: false});
    this.setState({comContractId: record.comContractId, typesd: record.contractType, fileListUrl: record.contractUrl});
  };
  handleChange = () => {

  };

  //报表类型 change
  pSelectChange = (value, type) => {
    console.log('value', value);
    console.log('type', type);
    this.setState({[type]: value});
  };

  //表格渲染
  renderTable = () => {

    const columns = [
      {
        title: '合同名称',
        dataIndex: 'contractName',
        key: 'contractName',
        width: 200,
        fixed: 'left',
        render: (text, record) => (
          <p style={{
            width: '200px',
            whiteSpace: 'nowrap',
            textOverflow: 'ellipsis',
            overflow: 'hidden'
          }}>{record.contractName}</p>
        )
      }, {
        title: '合同类型',
        dataIndex: 'contractType_name',
        key: 'contractType_name',
        width: 100,
        render: (text, record) => (
          <p style={{
            width: '100px',
            whiteSpace: 'nowrap',
            textOverflow: 'ellipsis',
            overflow: 'hidden'
          }}>{record.contractType_name}</p>
        )
      }, {
        title: '合同方',
        dataIndex: 'contractPaty',
        key: 'contractPaty',
        width: 300,
        render: (text, record) => (
          <p style={{
            width: '300px',
            whiteSpace: 'nowrap',
            textOverflow: 'ellipsis',
            overflow: 'hidden'
          }}>{record.contractPaty}</p>
        )
      }, {
        title: '合同状态',
        dataIndex: 'contractStatus',
        key: 'contractStatus',
        width: 100,
        render: (text, record) => (
          <div>
            {
              record.contractStatus === "1" ? (
                  <span>
                  <Badge status="warning"/>
                  <span style={{
                    width: '150px',
                    whiteSpace: 'nowrap',
                    textOverflow: 'ellipsis',
                    overflow: 'hidden'
                  }}>已签订</span>
                </span>
                ) :
                record.contractStatus === "2" ? (
                    <span>
                    <Badge status="success"/>
                    <span style={{width: '150px', whiteSpace: 'nowrap', textOverflow: 'ellipsis', overflow: 'hidden'}}>已完成</span>
                  </span>
                  ) :
                  record.contractStatus === "3" ? (
                      <span>
                      <Badge status="processing"/>
                      <span style={{
                        width: '150px',
                        whiteSpace: 'nowrap',
                        textOverflow: 'ellipsis',
                        overflow: 'hidden'
                      }}>已续签</span>
                    </span>
                    ) :
                    record.contractStatus === "9" ? (
                      <span>
                        <Badge status="error"/>
                        <span
                          style={{width: '150px', whiteSpace: 'nowrap', textOverflow: 'ellipsis', overflow: 'hidden'}}>已终止</span>
                      </span>
                    ) : ''
            }
          </div>
        )
      }, {
        title: '合同上传时间',
        dataIndex: 'createTime',
        key: 'createTime',
        width: 150,
        render: (text, record) => (
          <p style={{
            width: '150px',
            whiteSpace: 'nowrap',
            textOverflow: 'ellipsis',
            overflow: 'hidden'
          }}>{record.createTime}</p>
        )
      }, {
        title: '最后修改时间',
        dataIndex: 'lastUpdateTime',
        key: 'lastUpdateTime',
        width: 150,
        render: (text, record) => (
          <p style={{
            width: '150px',
            whiteSpace: 'nowrap',
            textOverflow: 'ellipsis',
            overflow: 'hidden'
          }}>{record.lastUpdateTime}</p>
        )
      }, {
        title: '操作',
        key: 'action',
        width: 200,
        render: (text, record) => (
          <span className="action">
            <span onClick={this.changeDrawer2.bind(this, record)} style={{color: '#0F71FF'}}>查看</span>
            <span onClick={this.changeDrawer3.bind(this, record)} style={{color: '#0F71FF'}}>编辑</span>
            <a href={record.contractUrl} style={{marginRight: '8px', color: '#0F71FF'}}>下载</a>
            <span className="delete" onClick={this.showDeleteConfirm.bind(this, record)}
                  style={{color: '#0F71FF'}}>删除</span>
            <span onClick={this.openDrawRenew.bind(this, record)} style={{color: '#0F71FF'}}>续签</span>
            <span onClick={this.changeDrawer3.bind(this, record)} style={{color: '#0F71FF'}}>变更</span>
            <span onClick={this.interrupt.bind(this, record)} style={{color: '#0F71FF'}}>终止</span>
          </span>
        )
      }
    ];
    return (
      <PTable
        style={{marginTop: 20}}
        columns={columns}
        url="enterpriseComContractComContractList"
        pageParm={this.state.pageParm}
        dateChange={this.dateTableChange}
        forceUpdate={this.state.forceUpdate}
        scroll={{x: 1000}}
      />
    );
  };

  //关闭 修改 item 抽屉
  closeDrawer = () => {
    Modal.confirm({
      title: '当前信息未提交，返回后无法保证。是否确认返回？',
      okText: '确定',
      cancelText: '取消',
      onOk: () => {
        this.setState({renewOpen: false});
      },
      onCancel: () => {
        console.log('Cancel');
      },
    });
  }
  confirmDrawer = () => {
    this.setState({renewOpen: false});
  }


  openDrawRenew = (record) => {
    this.setState({comContractId: record.comContractId, renewOpen: true});
  };


  render() {
    // const { getFieldDecorator } = this.props.form;
    const {renewOpen} = this.state;
    return (
      <div className="contractWrapper">
        <div>
          <h2>共检索到<span>{this.state.number}</span>条数据</h2>
          <div>
            <div>
              <label>合同类型：
                <PSelect type="contractType" onChange={this.pSelectChange} value={this.state.contractType} addOption/>
              </label>
              <label style={{display: 'inline-block', marginRight: '16px'}}>
                <Input style={{width: 214, marginLeft: 16}} placeholder="合同名称搜索" onChange={this.onChangeName}/>
              </label>
              <Button id="btnSearch" type="primary" onClick={this.handleContractSubmit}>搜索</Button>
            </div>
            <div style={{marginTop: '16px'}}>
              <Button id="btnAdd" type="primary" onClick={this.changeDrawer}><NavLink to="./AddContract">添加合同</NavLink></Button>
            </div>
            {this.renderTable()}
            <ContractDrawer onChange={(open) => {
              this.setState({open});
            }} visiable={this.state.open} editable={this.state.editable} comContractId={this.state.comContractId}
                            typesd={this.state.typesd} fileUrl={this.state.fileListUrl} changeTable={this.changeTable}/>

            {/*续签合同*/}
            {/*<RenewContractDrawer onChange={(renewOpen) => {
              this.setState({renewOpen});
            }} visiable={this.state.renewOpen} editable={this.state.editable} comContractId={this.state.comContractId}
                                 typesd={this.state.typesd} fileUrl={this.state.fileListUrl}
                                 changeTable={this.changeTable}/>*/}
            <DrawRenew
              visible={renewOpen}
              closeDrawer={this.closeDrawer}
              confirDrawer={this.confirmDrawer}
              comContractId={this.state.comContractId}
            />
          </div>
        </div>
      </div>
    );
  }
}
